<!-- 处置 -->
<template>
  <div class="statistics">
    <div class="ic-penal">
      <div class="penal-tlt">
        <SvgIcon name="cheliang" style="width: 20px; height: 20px; margin: 0 8px 0 0" />
        <span>车辆统计</span>
      </div>
      <div class="penal-num">
        <div class="penal-num-item" v-for="(item, index) in carItems1" :key="index" @click="statisticsClick(item)">
          <a-tooltip :content="item.mouseenter" :disabled="!item.mouseenter">
            <div :class="['penal-data', item.active ? 'penal-data-active' : '']">
              <div>{{ item.name }}</div>
              <div>{{ item.num || '0' }} <span style="font-size: 10px; font-weight: 400; margin-left: 4px">辆</span></div>
            </div>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div class="ic-penal">
      <div class="penal-tlt">
        <SvgIcon name="yunwei" style="width: 20px; height: 20px; margin: 0 8px 0 0" />
        <span>运维统计</span>
      </div>
      <div class="penal-num">
        <div class="penal-num-item" v-for="(item, index) in carItems2" :key="index" @click="statisticsClick(item)">
          <a-tooltip :disabled="!item.mouseenter">
            <div :class="['penal-data', item.active ? 'penal-data-active' : '']">
              <div>{{ item.name }}</div>
              <div>{{ item.num || '0' }} <span style="font-size: 10px; font-weight: 400; margin-left: 4px">辆</span></div>
            </div>
            <template #content>
              <!-- 如果是 vnode 节点，则用 component 渲染 -->
              <component v-if="isVNode(item.mouseenter)" :is="item.mouseenter" />
              <template v-else>{{ item.mouseenter }}</template>
            </template>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div class="ic-penal">
      <div class="penal-tlt">
        <SvgIcon name="tongji" style="width: 20px; height: 20px; margin: 0 8px 0 0" />
        <span>运营统计</span>
      </div>
      <div class="penal-num">
        <div class="penal-num-item" v-for="(item, index) in carItems3" :key="index" @click="statisticsClick(item)">
          <!-- 运维中，已处置 -->
          <a-tooltip :disabled="!item.mouseenter" v-if="item.value == 'operationCount' || item.value == 'disposalCount'">
            <div :class="['penal-data', item.active ? 'penal-data-active' : '']">
              <div>{{ item.name }}</div>
              <div>{{ item.num || '0' }} <span style="font-size: 10px; font-weight: 400; margin-left: 4px">辆</span></div>
            </div>
            <template #content>
              <div v-if="item.value == 'operationCount'">
                <p>维修中：{{ getStatisticList.repairCount }}</p>
              </div>
              <div v-if="item.value == 'disposalCount'">
                <p>车辆出售：{{ getStatisticList.disposalSale }}</p>
                <p>车辆报废：{{ getStatisticList.disposalScrap }}</p>
                <p>借调车归还：{{ getStatisticList.disposalReturn }}</p>
                <p>其他：{{ getStatisticList.disposalOther }}</p>
              </div>
            </template>
          </a-tooltip>
          <a-tooltip v-else :content="item.mouseenter" :disabled="!item.mouseenter">
            <div :class="['penal-data', item.active ? 'penal-data-active' : '']">
              <div>{{ item.name }}</div>
              <div>{{ item.num || '0' }} <span style="font-size: 12px; font-weight: 400; margin-left: 4px">辆</span></div>
            </div>
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CarStatistics" lang="jsx">
  import { ref, isVNode, onMounted } from 'vue'
  import { findStatistics } from '@/api/asset/car'
  import { ruleDetail } from '@/api/system/backlogrule'
  import dayjs from 'dayjs'

  const detail = ref({})

  const carItems1 = ref([
    {
      name: '车辆总数',
      num: 0,
      value: 'totalCount',
      active: false,
      mouseenter: '运营状态为租赁中、空闲可租、运维中、已借出的车辆数总和',
    },
    {
      name: '可用车辆数',
      num: 0,
      value: 'usableCount',
      active: false,
      mouseenter: '运营状态为租赁中、空闲可租、运维中的车辆，不包含已借出的车辆',
    },
    {
      name: '自有车辆',
      num: 0,
      value: 'selfCarCount',
      active: false,
      mouseenter: '',
    },
    {
      name: '借调（借入）车辆',
      num: 0,
      value: 'loanedCarCount',
      active: false,
      mouseenter: '',
    },
    {
      name: '托管/挂靠',
      num: 0,
      value: 'escrowCarCount',
      active: false,
      mouseenter: '',
    },
    {
      name: '融资租赁',
      num: 0,
      value: 'fundingCarCount',
      active: false,
      mouseenter: '',
    },
  ])
  const carItems2 = ref([
    {
      name: '近期保养',
      num: 0,
      value: 'recentMaintainCount',
      day: 'maintenanceBeforeDay',
      kilometer: 'maintenanceBeforeMileage',
      active: false,
      mouseenter: '',
    },
    {
      name: '近期年检',
      num: 0,
      value: 'recentInspectionCount',
      day: 'inspectionBeforeDay',
      active: false,
      mouseenter: '',
    },
    {
      name: '近期交强险续保',
      num: 0,
      value: 'recentRenewInsuranceCount',
      day: 'insureCompulsoryDay',
      active: false,
      mouseenter: '',
    },
    {
      name: '近期商业险续保',
      num: 0,
      value: 'businessRecentRenewInsuranceCount',
      day: 'insureBusinessDay',
      active: false,
      mouseenter: '',
    },
    {
      name: '维修中',
      num: 0,
      value: 'repairCount',
      active: false,
      mouseenter: '当前正在维修的车辆数',
    },
  ])
  const carItems3 = ref([
    {
      name: '租赁中',
      num: 0,
      value: 'rentCount',
      active: false,
      mouseenter: '业务订单正在使用的车辆',
    },
    {
      name: '空闲可租',
      num: 0,
      value: 'freeCount',
      active: false,
      mouseenter: '',
    },
    {
      name: '运维中',
      num: 0,
      value: 'operationCount',
      active: false,
      mouseenter: '-', //给默认值，否则不显示
    },
    // {
    //   name: '已处置',
    //   num: 0,
    //   value: 'disposalCount',
    //   active: false,
    //   mouseenter: '-', //给默认值，否则不显示
    // },
    {
      name: '已借出',
      num: 0,
      value: 'loanOutCount',
      active: false,
      mouseenter: '借出还未归还的车辆数', //给默认值，否则不显示
    },
  ])

  const show = (code) => {
    console.log('数量统计', code)
    getStatistic()
  }

  // 数量统计
  const getStatisticList = ref({})
  const getStatistic = (queryParam) => {
    // carItems1.value[0].active = true
    findStatistics(queryParam).then((res) => {
      getStatisticList.value = res.result
      carItems1.value.forEach((item) => {
        item.num = res.result[item.value]
      })
      carItems2.value.forEach((item) => {
        item.num = res.result[item.value]
      })
      carItems3.value.forEach((item) => {
        item.num = res.result[item.value]
      })
    })
  }

  // 运维统计提示数据获取
  const getStatisticTip = () => {
    ruleDetail().then((res) => {
      carItems2.value.forEach((item) => {
        if (item.value === 'recentMaintainCount') {
          // item.mouseenter = `当天距离下次保养日期小于等于${res.result[item.day]}天，或距离下次保养里程小于等于${
          //   res.result[item.kilometer]
          // }公里的车辆`
          let day = dayjs().add(res.result[item.day], 'day').format('YYYY-MM-DD')
          item.mouseenter = (
            <div>
              <p>1.车辆当前里程距下次保养里程小于等于{res.result[item.kilometer]}公里的车辆。</p>
              <p>2.保养到期日在{day}之前的车辆。</p>
            </div>
          )
        }
        if (item.value === 'recentInspectionCount') {
          // item.mouseenter = `当天距离下次年检日期小于等于${res.result[item.day]}天的车辆`
          let day = dayjs().add(res.result[item.day], 'day').format('YYYY-MM-DD')
          item.mouseenter = `年检到期日在${day}之前的车辆。`
        }
        if (item.value === 'recentRenewInsuranceCount') {
          // item.mouseenter = `当天距离下次交强险续保日期小于等于${res.result[item.day]}天的车辆`
          let day = dayjs().add(res.result[item.day], 'day').format('YYYY-MM-DD')
          item.mouseenter = `交强险到期日在${day}之前的车辆。`
        }
        if (item.value === 'businessRecentRenewInsuranceCount') {
          // item.mouseenter = `当天距离下次商业险续保日期小于等于${res.result[item.day]}天的车辆`
          let day = dayjs().add(res.result[item.day], 'day').format('YYYY-MM-DD')
          item.mouseenter = `商业险到期日在${day}之前的车辆。`
        }
      })
    })
  }

  const emit = defineEmits(['savedispose', 'statisticsSearch'])

  const statisticsClick = (item) => {
    carItems1.value.forEach((i) => {
      if (i.value == item.value) {
        i.active = true
      } else {
        i.active = false
      }
    })
    carItems2.value.forEach((i) => {
      if (i.value == item.value) {
        i.active = true
      } else {
        i.active = false
      }
    })
    carItems3.value.forEach((i) => {
      if (i.value == item.value) {
        i.active = true
      } else {
        i.active = false
      }
    })
    emit('statisticsSearch', item.value)
  }

  // 取消所有选中
  const resetRn = () => {
    carItems1.value.forEach((i) => {
      i.active = false
    })
    carItems2.value.forEach((i) => {
      i.active = false
    })
    carItems3.value.forEach((i) => {
      i.active = false
    })
  }

  defineExpose({
    resetRn,
    show,
    isVNode,
    getStatistic,
  })

  // mounted 调用接口
  onMounted(() => {
    getStatistic()
    getStatisticTip()
  })
</script>

<style lang="less" scoped>
  .statistics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .ic-penal {
    padding: 12px;
    height: 180px;
    width: 32%;
    // height: 208px;
    background: #f7f8fa;
    border-radius: 2px;
    .penal-tlt {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: var(--color-text-1);
      font-size: 14px;
      font-weight: 500;
      margin-left: 8px;
    }
    .penal-num {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      .penal-num-item {
        width: 33.3333%;
      }
      .penal-data {
        width: max-content;
        padding-right: 0;
        height: 62px;
        margin: 4px 0;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        cursor: pointer;
        div:nth-child(1) {
          color: #1d2129;
          font-size: 10px;
          margin: 8px 0 4px 8px;
        }
        div:nth-child(2) {
          color: #4e5969;
          font-size: 20px;
          font-weight: 600;
          margin-left: 8px;
        }
      }

      // .penal-data{
      //   width: 33.3333%;
      // }
      .penal-data-active {
        background-color: rgba(22, 93, 255, 0.1);
        padding-right: 8px;
        div:nth-child(1) {
          color: #4e5969;
        }
        div:nth-child(2) {
          color: #165dff;
        }
      }
    }
  }
  .ic-penal:nth-child(2) {
    margin: 0 2%;
  }
</style>
